<template id="section-discuss">
  <div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="课堂讨论区" name="1">
     
      <el-tree
             style="max-width: 600px"
             node-key="courseTalkId"
             :data="data"
             :props="defaultProps"
             accordion
             :default-expanded-keys="expandKeys"
             @node-click="handleNodeClick">
      <div  style="display:flex" slot-scope="{ node, data }">
        <span v-if="data.courseTalkTitle"><span>{{data.userName}}：</span> {{data.courseTalkContent}}</span>
        <span v-else style="margin-left: 20px"><span>{{data.userName}}：</span> {{data.courseTalkContent}}</span>

        <div class="uptriangle" @click="confirmGreat(data)"></div><div>{{data.great}}</div>
      </div>
    </el-tree>
    <div style="margin-top: 20px">
      <div v-if="anchorOfOpe">回复：{{anchorOfOpe.courseTalkContent}}</div>
      <el-input
        v-model="inputDialogContent"
        style="width: 80%"
        placeholder="文明，严谨，和谐"
        clearable
      />
      <el-button style="margin-left: 15px" type="primary" @click="confirmAdd">
        {{anchorOfOpe ? '回复' : '发起'}}
      </el-button>
    </div>
  </el-collapse-item>
</el-collapse>
   
  </div>

</template>

<script>
import sectiontree from '@/api/sectiontree.js'
export default {
  props: {
    // 初始内容
    sectionId: {
      type: Number,
      required: true
    },
  },
    name: 'SectionDiscuss',
    data() {
      return {
        data: [],
        defaultProps: {
          children: 'children',
          label: 'courseTalkTitle'
        },
        inputDialogContent: '',
        anchorOfOpe: null,
        expandKeys: []
      };
    },
    mounted() {
      console.log("Diss mounted:", this.sectionId)
      this.loadDissList(this.sectionId)
    },
    methods: {
      handleNodeClick(data) {
        console.log("handleNodeClick", data);
        if (data.courseTalkTitle != '') {
          this.anchorOfOpe = data;
        }
      },
      confirmGreat(data) {
        sectiontree.savegreat(data.courseTalkId).then(resp => {
          this.loadDissList(this.sectionId)
          this.expandKeys = [data.courseTalkId]
        })
      },
      confirmAdd() {
        if (this.anchorOfOpe) {
          sectiontree.dissTalk(this.anchorOfOpe.courseTalkNumber, this.inputDialogContent, this.sectionId).then(r => {

            this.loadDissList(this.sectionId)
            this.expandKeys = [r.data.courseTalkId]
          })
        } else {
          sectiontree.fireTalk(this.inputDialogContent,this.sectionId ).then(r => {
            this.loadDissList(this.sectionId)
            this.expandKeys = [r.data.courseTalkId]
          })

        }

      },

      clear() {
        this.inputDialogContent = '';
        this.anchorOfOpe = null;
      },

      loadDissList(sectionId) {
        sectiontree.listAllTalk(sectionId).then(resp => {
          this.data = resp.data;
          this.clear();
        })
      }
    }
  };
</script>
<style scoped lang="scss">
  .uptriangle {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 13px solid powderblue;
  }
  .downtriangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
  }
</style>


